<template>
  <el-row>
    <!-- 头部 -->
    <el-col :span="24">
      <el-card shadow="hover">
        <el-breadcrumb :separator-icon="ArrowRightBold">
          <el-breadcrumb-item :to="{ path: '/admin_index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>订单管理</el-breadcrumb-item>
          <el-breadcrumb-item>投注订单</el-breadcrumb-item>
        </el-breadcrumb>
      </el-card>
    </el-col>
    <div style="padding: 5px;"></div>
    <!-- 内容区域 -->
    <el-col :span="24">
      <el-card shadow="hover">
        <template #header>
          <div style="margin-bottom: 10px;">
            <el-radio-group v-model="page.game_type" @change="dddd">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="1">红包接龙</el-radio-button>
              <el-radio-button label="2">红包28杠</el-radio-button>
              <el-radio-button label="3">红包扫雷</el-radio-button>
              <el-radio-button label="4">红包牛牛</el-radio-button>

            </el-radio-group>
          </div>
          <div style="display: flex; align-items: center;flex-wrap: wrap;">
            <el-select   popper-class="custom-select-dropdown"    style="width: 150px;" v-model="page.status" placeholder="全部">
              <el-option label="未开奖" value="1">未开奖</el-option>
              <el-option label="已开奖" value="2">已中奖</el-option>
              <el-option label="未中奖" value="3">未中奖</el-option>

            </el-select>

            <div style="padding: 5px;"></div>

            <el-date-picker v-model="page.time_date[0]" :default-value="page.time_date[0]" type="datetime" placeholder="开始日期" style="width: 180px;" />
            <div style="width: 15px"></div>
            <el-date-picker v-model="page.time_date[1]" :default-value="page.time_date[1]" default-time="12:00:00" type="datetime" placeholder="结束日期" style="width: 180px;" />
            <div style="padding: 5px;"></div>
            <el-input style="width: 260px;" v-model="inputval" placeholder="请输入UID、手机、昵称、备注"/>
            <div style="padding: 5px;"></div>
            <el-select   popper-class="custom-select-dropdown"  style="width: 150px;" v-model="group_id" placeholder="请选择用户分组">
              <el-option label="全部" value="">全部</el-option>
              <el-option label="未分组" value="0">未分组</el-option>
              <el-option :label="item.name" :value="item.id" v-for="item in group_list">{{ item.name }}</el-option>
            </el-select>
            <div style="padding: 5px;"></div>
            <el-button type="primary" :icon="Search" @click="inputSearch()" style="margin-right: 15px;">搜索</el-button>
            <div style="display: flex; justify-content: space-between;width: 100%;margin-top: 10px;">
              <div
                  style="font-size: 15px; color: #666666; font-weight: 600; background-color: #efefef; padding:6px 10px; border-radius: 5px;">
                <span style="color: red;margin-right:10px;">玩家总人数：<span style="color: green;">{{ userCount }}</span></span>
                <span style="color: red;">平台抽水总额：<span style="color: green;">￥{{ count_money }}</span></span>

              </div>
              <div style="display: flex; align-items: center;">
                <el-radio-group v-model="page.pagesize" @change="pageSelect">
                  <el-radio-button label="50">50</el-radio-button>
                  <el-radio-button label="100">100</el-radio-button>
                  <el-radio-button label="500">500</el-radio-button>
                  <el-radio-button label="1000">1000</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </div>
        </template>

        <!-- 表格 -->
        <el-table :data="tableData.list" :border="true" style="width: 100%" v-loading="loading">
          <!--          <el-table-column prop="id" label="序号" width="80"/>-->
          <!-- <el-table-column prop="orderid" label="订单编号" width="210" /> -->


            <el-table-column label="头像" width="60">
              <template #default="scope">
                <div><img v-if="scope.row.user?.headimgurl" :src="scope.row.user?.headimgurl" style="width: 40px;height:40px;border-radius: 50%"></div>
              </template>
            </el-table-column>
          <el-table-column label="用户详情" width="180">
            <template #default="scope">
              <!--              <div>UID：{{ scope.row.userid }}</div>-->
              <div>昵称：{{ scope.row.nickname }}</div>
              <div>备注：{{ scope.row.user.remark }}</div>
              <div>手机：{{scope.row.user?.phone}}</div>
<!--              <div>类型：-->
<!--                <el-tag type="success" v-if="scope.row.role == 0">正常玩家</el-tag>-->
<!--                <el-tag type="danger" v-if="scope.row.role == 1">内部用户</el-tag>-->
<!--              </div>-->
            </template>
          </el-table-column>

          <el-table-column label="游戏详情" width="120" >
            <template #default="scope">
              <div>{{ scope.row.game_name }}</div>
              <div>{{ scope.row.room_name }}</div>
              <div>{{ scope.row.issue }}</div>
            </template>
          </el-table-column>

          <el-table-column label="投注详情"  >
            <template #default="scope">
              <el-button type="success"  @click="openOrder(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>

          <!-- <el-table-column prop="room_betname" label="投注类型" /> -->

          <el-table-column label="支付详情" width="280" >
            <template #default="scope">

              <div >下注前余额：
                <el-tag type="danger">￥{{ scope.row.money1 }}</el-tag>

              </div>
              <div style="padding:5px 0;">结算后余额：
                <el-tag type="danger">￥{{ scope.row.money2 }}</el-tag>

              </div>

            </template>
          </el-table-column>

          <!--          <el-table-column label="中奖金额" width="220" >-->
          <!--            <template #default="scope">-->
          <!--              <div>-->
          <!--                <el-tag type="danger" v-if="scope.row.status == 2">￥{{ scope.row.amoney }}</el-tag>-->
          <!--                <el-tag type="success" v-else>￥0.00</el-tag>-->
          <!--              </div>-->
          <!--              &lt;!&ndash; <div v-if="scope.row.reward_money_after>0">中奖后：<el-tag type="danger">￥{{ scope.row.reward_money_after }}</el-tag></div> &ndash;&gt;-->
          <!--            </template>-->
          <!--          </el-table-column>-->

          <!-- <el-table-column label="投注方式" width="100">
              <template #default="scope">
                  <el-tag v-if="scope.row.bet_type == 1">快捷下注</el-tag>
                  <el-tag type="success" v-if="scope.row.bet_type == 2">键盘下注</el-tag>
              </template>
          </el-table-column> -->


          <el-table-column label="输赢情况" width="200" >
            <template #default="scope">
              <div  v-if="scope.row.ymoney>0">
              <div >抢包金额：
                <el-tag type="success">￥{{ scope.row.amoney }}</el-tag>
              </div>
              <div >抽水金额：
                <el-tag type="danger">￥{{ scope.row.cmoney }}</el-tag>
              </div>
              <div >实际增加：
                <el-tag type="success">￥{{ scope.row.ymoney }}</el-tag>
              </div>
              </div>
              <div v-else>
                本局输:
                <el-tag type="danger">￥{{ scope.row.ymoney }}</el-tag>
              </div>

            </template>
          </el-table-column>
          <!-- <el-table-column prop="agent_rate" label="代理费率" width="90" />
          <el-table-column prop="agent_money" label="返佣金额" width="90" /> -->
          <!--          <el-table-column label="订单状态" width="100">-->
          <!--            <template #default="scope">-->
          <!--              <el-button type="danger" v-if="scope.row.status == 1">未开奖</el-button>-->
          <!--              <el-button type="success" v-if="scope.row.status == 2">已中奖</el-button>-->
          <!--              <el-button type="warning" v-if="scope.row.status == 3">未中奖</el-button>-->
          <!--              <el-button type="info" v-if="scope.row.status == 4">已撤单</el-button>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column prop="create_time" label="订单时间" width="180"/>



        </el-table>
        <!-- 分页 -->

        <div style="padding: 10px;"></div>
        <div style="display: flex;">
          <el-pagination small background v-model:currentPage="page.pagenum" v-model:page-size="page.pagesize"
                         :page-sizes="[20, 50]" :small="small" :background="background"
                         layout="total, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"/>

        </div>
      </el-card>
    </el-col>
  </el-row>

  <!-- 下级列表 -->
  <el-dialog v-model="dialog" center title="投注详情" width="1000" :destroy-on-close="true">
    <el-col :span="24">
        <!-- 表格 -->
        <el-table :data="orderData.list" :border="true" style="width: 100%">

          <el-table-column prop="userId" label="UID" />
          <el-table-column prop="userType" label="真人" >
            <template #default="scope">

              <el-tag type="success" v-if="scope.row.userType==1">是</el-tag>

              <el-tag type="danger" v-else>否</el-tag>

            </template>
          </el-table-column>
          <el-table-column prop="nickname" label="用户名" />
          <el-table-column prop="income_amount" label="输赢" >
            <template #default="scope">
              <el-tag type="success" v-if="scope.row.status==1">￥{{scope.row.income_amount}}</el-tag>
              <el-tag type="danger" v-if="scope.row.status==2">￥{{Math.abs(scope.row.income_amount)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="amoney" label="抢包" >
            <template #default="scope">
              <el-tag type="success">￥{{scope.row.amoney}}</el-tag>

            </template>
          </el-table-column>
          <el-table-column  label="抽水（5%）" >
            <template #default="scope">
              <el-tag type="danger">{{truncateDecimal(scope.row.amoney*5/100, 2)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column  label="结算" >
            <template #default="scope">
              <el-tag type="success" v-if="scope.row.status==1">￥{{truncateDecimal(scope.row.income_amount - truncateDecimal(scope.row.amoney*5/100, 2), 2)}}</el-tag>
              <el-tag type="danger" v-if="scope.row.status==2">￥{{truncateDecimal(Math.abs(scope.row.income_amount) + truncateDecimal(scope.row.amoney*5/100, 2) - scope.row.amoney, 2)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createtime" label="抢包时间" />


        </el-table>

    </el-col>
  </el-dialog>
</template>

<script setup>

import {ref, reactive, onMounted} from 'vue'
import {request_post} from '@/common/axios/request.js'
import {success, error} from '@/common/tool/message.js'
import {ArrowRightBold, UserFilled, Search} from '@element-plus/icons-vue'

const loading = ref(false)
const count_money = ref(null)
const userCount = ref(null)
const count_amoney = ref(null)
const chedan_money = ref(null)
const group_list = ref([])
const group_id = ref('')
const dialog = ref(false)
const tableData = reactive({list: []})
const orderData = reactive({list: []})


// 查看详情
function openOrder(item) {

  request_post('/admin_hb_order', {id:item.issue}).then((res) => {
    console.log(res)
    if (res.data.code == 200) {
      dialog.value = true
      orderData.list = res.data.data.orderList

    } else {
      return error(res.data.msg)
    }
  })

}


onMounted(() => {
  admin_order_index()
})

function pageSelect() {
  page.pagenum = 1
  loading.value = true
  admin_order_index()
}

// 搜索
const inputval = ref(null)

function inputSearch() {

  if (inputval.value) {
    page.uid = inputval.value
  }
  loading.value = true
  admin_order_index()

}

// 获取用户列表
function admin_order_index() {

  request_post('/reb_envelope_order', page).then((res) => {
    // console.log(res)
    if (res.data.code == 200) {
      chedan_money.value = res.data.data.chedan_money
      count_amoney.value = res.data.data.count_amoney
      count_money.value = res.data.data.total_money
      userCount.value = res.data.data.userCount
      page.total = res.data.data.order_list.total
      tableData.list = res.data.data.order_list.data
      group_list.value = res.data.data.group_list
    } else {
      return error(res.data.msg)
    }
    loading.value = false
  })

}

var now_date = new Date();
var now_date2 = new Date();
var year = now_date.getFullYear();
var month = now_date.getMonth() + 1; // 月份从0开始，所以要加1
var day = now_date.getDate();
now_date.setHours(23, 59, 59);
now_date2.setHours(0,0,0)
const page = reactive({
  uid: '',
  game_type: 'all',
  group_id: group_id,
  time_date: [
    now_date2,
    now_date
  ],
  status: '',
  pagenum: 1,
  pagesize: 18,
  total: 0
})

function handleSizeChange(val) {
  page.pagenum = val
  loading.value = true
  admin_order_index()
}

function handleCurrentChange(val) {
  page.pagenum = val
  loading.value = true
  admin_order_index()
}

function dddd(dd) {
  page.pagenum = 1
  loading.value = true
  admin_order_index()
}

// 截断小数，不四舍五入
function truncateDecimal(num, decimalPlaces) {
  const factor = Math.pow(10, decimalPlaces)
  return Math.floor(num * factor) / factor
}

</script>

<style>
.big {
  font-size: 20px;
}

.big .el-tag {
  font-size: 16px;
}
</style>
